<template>
	<div class="box">
		<slot name="a" :abc="outer"></slot>
	</div>
	<Row>
		<Button type="default" @click="add">操作</Button>
	</Row>
	<Row ref="c-row" class="myrow" type="flex">
		<Button type="default" @click="add2">操作2</Button>
	</Row>
	<Row>
		{{ box?.a }} : {{ box?.b }}
		<Button type="default" @click="add3">操作</Button>
		{{ c }}
	</Row>
</template>
<script>
import { throttle, wrap } from 'lodash';
import { MyBox } from './251014.box';
export default {
	name: 'testSlot',
	data() {
		return {
			a: 1,
			b: 2,
			outer: {
				a: 1,
				b: 2
			},
			box: new MyBox({
				context: this
			})
		}
	},
	computed: {
		c() {
			return this.box?.a
		},
		newUrlObj() {
			let res;
			res = {
				a: 'https://' + this.a,
				b: 'https://' + this.b,
				c: 'https://' + this.outer.a
			}
			return res;
		}
	},
	methods: {
		add() {
			this.a = 999;
			this.outer.a = 'c'
			this.outer = {
				a: 8,
				b: 999
			}
			console.log(this.newUrlObj);
		},
		add2() {
			this.box.showDialog();
		},
		add3() {
			console.log(this.box);
			// this.box.showDialog();
			setTimeout(() => {
				this.$nextTick(res => {
					this.box.a++;
				})
			}, 1e3);
		}
	},
	created() {
		// this.box = new MyBox({
		// 	context: this
		// })
	},
	mounted() {
		// this.box = new MyBox({
		// 	context: this
		// })
		const f1 = wrap(throttle(function () {
			console.log(`helloworld`);
		}, 1e3), function (f) {
			console.log(`处理前`);
			f();
			console.log(`处理后`);
		});
		this.box.init();

		// setInterval(() => {
		// 	f1();
		// }, 100);
	}
}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
</style>